import React from "react";
import { NavBar, Space, Toast } from "antd-mobile";
import { Tabbar } from "react-vant";
import { routeskepuhao } from "../../routers/index";
import { useNavigate, useLocation, Outlet } from "react-router-dom";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  console.log(routeskepuhao);
  const back = () => {
    navigate("/");
  };

  return (
    <div>
      <header>
        <div>
          <NavBar
            style={{
              background: "blue",
              color: "#fff",
              width: "100%",
              height: "40px",
              position: "fixed",
              zIndex: 999,
              top: 0,
            }}
            onBack={back}
          >
            科普号
          </NavBar>
        </div>
      </header>
      <main>
        <Outlet />
      </main>
      <footer>
        <Tabbar value={pathname} onChange={(val) => navigate(val as string)}>
          {routeskepuhao.map((item, indx) => (
            <Tabbar.Item name={item.path} icon={item.meta.icon} key={indx}>
              {item.meta.label}
            </Tabbar.Item>
          ))}
        </Tabbar>
      </footer>
    </div>
  );
};
export default Index;
